<template>
	<view>
		<view class="user-page">
			<!-- 用户信息头部-开始  -->
			<view class="user-header">
				<view class="header-userinfo">
					<view class="userinfo-left">
						<!-- 用户的头像-开始  -->
						<view class="left-img">
							<image src="../../static/logo.png" mode=""></image>
						</view>
						<!-- 用户的头像-结束  -->

						<!-- 用户的个人信息-登录操作-开始  -->
						<view class="left-text">
							<view class="text">
								<text>未登录</text>
								<text>ID:123456</text>
							</view>
							<view class="tag">
								优秀博主
							</view>
						</view>
						<!-- 用户的个人信息-登录操作-结束  -->
					</view>
					<view class="userinfo-right">
						<text>个人资料></text>
					</view>
				</view>
				<view class="header-tools">
					<view class="header-tools-item" v-for="(item,index) in toolsList" :key="index">
						<text>{{item.value}}</text>
						<text>{{item.name}}</text>
					</view>
					<!-- <view class="header-tools-item">
						<text>0</text>
						<text>我的粉丝</text>
					</view>
					<view class="header-tools-item">
						<text>0</text>
						<text>我的关注</text>
					</view> -->
				</view>
			</view>
			<!-- 用户信息头部-结尾  -->
			<view class="user-content">
				<!-- 个人中心菜单列表-开始 -->  
				<view class="tools-list">
					<view class="tools-list-item" v-for="(item,index) in toolsList1" :key="index">
						<view class="item-left">
							<image class="item-left-icon" :src="item.img"></image>
							<text>{{item.name}}</text>
						</view>
						<view class="item-right">
							>
						</view>
					</view>
				</view>
				<!-- 个人中心菜单列表-结束 -->
			</view>
		</view>
	</view>
</template>

<script>
import { Static } from "vue"
	export default {
		data() {
			return {
				toolsList: [{
						name: "我的文章",
						value: 0
					}, {
						name: "我的粉丝",
						value: 0
					}, {
						name: "我的关注",
						value: 0,

					}],
					
				toolsList1: [{
						name: "商品管理",
						value: 0,
						img:"../../static/购物车.png"
					}, {
						name: "账号认证",
						value: 0,
						img:"../../static/安全.png"
					}, {
						name: "推广有礼",
						value: 0,
						img:"../../static/礼物.png"

					}, {
						name: "意见反馈",
						value: 0,
						img:"../../static/纸飞机.png"
					}, {
						name: "联系我们",
						value: 0,
						img:"../../static/聊天.fw.png"
					}

				]

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.user-page {
		.user-header {
			display: block;
			padding: 12px;
		}

		.header-userinfo {
			display: flex;
			justify-content: space-between;
			/* flex下两端对齐 */
			align-items: center;
			/* flex下垂直居中 */
		}

		.userinfo-left {
			display: flex;
			align-items: center;
			/* flex下垂直居中 */
		}

		.left-text {
			display: flex;
			align-items: center;
			/* flex下垂直居中 */
			padding-left: 16px;

			text {
				display: block;
			}

			.tag {
				border: 1px solid blueviolet;
				/* 添加边框线 粗细 类型 颜色*/
				border-radius: 8px;
				font-size: 12px;
				padding: 2px;
				color: blueviolet;
			}
		}

		.left-img {
			width: 48px;
			height: 48px;
			border-radius: 50%;
			overflow: hidden;

			/* 超出部分隐藏 */
			image {
				width: 100%;
				height: 100%;
			}

		}

		.header-tools {
			width: 100%;
			display: flex;
			padding: 12px 0;

			.header-tools-item {
				flex: 1; //所有子集都设flex1 表示平均分配
				text-align: center; //文本内容居中对齐
			}

			.header-tools-item text {
				display: block;
			}
		}

		.tools-list {
			padding: 12px;

			&-item {
				height: 56px;
				width: 100%;
				display: flex;
				justify-content: space-between;
				// flex下两端对齐
				align-items: center;
				// flex下垂直居中

				.item-left {
					display: flex;
					align-items: center;
				}


				.item-left-icon {
					width: 24px;
					height: 24px;

					padding-right: 10px;
				}
			}
		}

	}
</style>